<template>
  <view class="login">
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor />

    <view class="page-container">
      <view class="container">
        <view class="png-view">
          <image src="@/static/image/login/name.png" mode="widthFix" />
        </view>

        <view class="form-view">
          <view class="title"> 账号登录 </view>
          <view class="tips">请使用已绑定的手机号进行登录</view>

          <view class="input-view flex flex-middle">
            <input
              class="flex-1"
              placeholder="请输入手机号"
              maxlength="11"
              type="number"
              v-model="mobile"
            />
          </view>

          <view class="input-view flex flex-middle">
            <input
              class="flex-1"
              placeholder="请输入验证码"
              type="number"
              maxlength="6"
              v-model="code"
            />

            <view
              class="get-code flex flex-middle flex-center"
              @click="getCode"
            >
              <text v-if="!sendCodeLoad && expireTime == null && !again">
                获取验证码
              </text>

              <u-loading-icon v-else-if="sendCodeLoad" />

              <text style="color: #999" v-else-if="!again">
                重新获取（{{ expireTime }}s）
              </text>

              <text v-else>重新发送</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom safe-bottom">
      <view :class="{ vibrate: vibrate }" style="padding: 0 16px">
        <view
          class="safe-bottom page-container flex flex-middle flex-center flex-wrap"
        >
          <u-checkbox-group v-model="checkboxVal">
            <u-checkbox activeColor="#31BC4E" />
          </u-checkbox-group>
          我已阅读并同意
          <text @click="toMore('userAgreement')">《用户协议》</text>
          &
          <text @click="toMore('privacyPolicy')">《隐私条款》</text>
        </view>
      </view>
      <button
        class="login-btn flex flex-middle flex-center"
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { sendCode } from "@/api/common";

export default {
  data() {
    return {
      mobile: "",
      code: "",
      sendCodeLoad: false,
      expireTime: null,
      timer: null,
      again: false,
      checkboxVal: [],
      vibrate: false,
    };
  },
  computed: {
    ...mapGetters(["codeEndTime"]),
  },
  onLoad() {
    if (this.codeEndTime) this.checkTime();
  },
  methods: {
    async handleLogin() {
      const { mobile, code } = this;
      if (!uni.$u.test.mobile(mobile + ""))
        return this.$toast("请输入正确的手机号");
      if (!uni.$u.test.code(code + ""))
        return this.$toast("请输入正确的验证码");
      if (!this.checkboxVal.length) {
        this.$toast("请阅读并同意");
        this.vibrate = true;
        setTimeout(() => {
          this.vibrate = false;
        }, 1000);
        return;
      }
      // 验证通过
      this.$store.dispatch("authLogin", { mobile, code });
    },
    async getCode() {
      if (this.sendCodeLoad || this.expireTime !== null) return;
      if (!uni.$u.test.mobile(this.mobile + ""))
        return this.$toast("请输入正确的手机号");
      // 验证通过
      this.again = false;
      this.sendCodeLoad = true;
      const { data } = await sendCode({ phone: this.mobile + "" });
      this.sendCodeLoad = false;
      if (!data) return;
      this.expireTime = +data.expireTime;
      this.$store.dispatch("saveCodeEndTime", +data.expireTime);
      this.startTime();

      // 测试
      this.code = data.code;
    },
    checkTime() {
      const now = new Date() * 1;
      if (this.codeEndTime > now) {
        this.expireTime = ((+this.codeEndTime - now) / 1000).toFixed(0);
        this.startTime();
      }
    },
    startTime() {
      this.timer = setInterval(() => {
        this.expireTime--;
        if (!this.expireTime) {
          this.expireTime = null;
          this.again = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    toMore(page) {
      this.$navigateTo(`/pages/common/${page}`);
    },
  },
};
</script>

<style scoped lang="scss">
.form-view {
  color: #383838;

  .title {
    font-size: 21px;
  }

  .tips {
    margin: 8px 0 24px;
  }

  .input-view {
    width: 100%;
    height: 40px;
    margin-bottom: 14px;
    background: #f6f6f6;
    border-radius: 8px;

    .get-code {
      width: 120px;
      height: 100%;
      border-left: 1px solid #eee;
      color: #31bc4e;
    }

    input {
      height: 100%;
      padding: 0 16px;
      font-size: 14px;
    }
  }
}

.bottom {
  position: absolute;
  left: 0;
  bottom: 54px;
  width: 100vw;
  color: #aeaeae;
  font-size: 13px;

  text {
    color: #666;
    line-height: 24px;
  }

  .login-btn {
    background: linear-gradient(0, #24d876 0%, #a5f46b 100%) !important;
    margin: 26px 28px 0;
    color: #fff;
    border-radius: 21px;
    height: 42px;
  }
}

.png-view {
  width: 120px;
  margin: 54px auto;

  image {
    width: 100%;
  }
}

.container {
  padding: 0 28px;
  position: relative;
}
</style>